<template>  
  <q-input
    dense
    outlined
    v-model.lazy="myGradientColor"
  >
    <template v-slot:append>
      <q-icon name="colorize" class="cursor-pointer">
        <q-popup-proxy transition-show="scale" transition-hide="scale">
          <ColorPicker is-widget use-type="gradient" format="hex" v-model:gradientColor="myGradientColor"></ColorPicker>
        </q-popup-proxy>
      </q-icon>
    </template>
  </q-input>  
</template>

<script lang="ts">
import { defineComponent, ref, toRefs, computed } from  'vue';
import { ColorPicker } from "vue3-colorpicker";
import { colors } from 'quasar';
import { isObjectEmpty } from 'src/util/utils';
import "vue3-colorpicker/style.css";

export default defineComponent({
  name: 'GradientColorPicker',
  components:{
    ColorPicker 
  },
  emits: ['update:color'],
  props: {
    gradientColor: {
      type: String,
      default: () => {
        return 'linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%)'
      }
    }
  },
  setup (props, context) {
    //解构
    const {
      gradientColor
    } = toRefs(props);

    const {
      getPaletteColor,
      textToRgb,
      rgbToHex
    } = colors;

    let myGradientColor = ref('')
    // let myGradientColor = computed({
    //   get: () => {   
    //     if (!isObjectEmpty(gradientColor.value)) {
    //       return gradientColor.value;
    //     } else {
    //       return 'linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%)'
    //     }
    //   },
    //   set: (c: string) => {
    //     context.emit('update:color', c);
    //   }
    // });

    return{
      myGradientColor
    }
  }
})
</script>

<style lang="scss" scoped>

</style>